<!--  -->
<template>
  <div class="container">
    <div class="header">头部</div>
    <div class="menu">菜单</div>
    <div class="content">右侧内容</div>
  </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref } from "vue";
</script>

<style lang='less' scoped>
.container {
  height: 100%;
  position: relative;
  .header {
    height: 70px;
    background-color: rgb(62, 62, 213);
  }
  .menu {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: rgb(43, 43, 68);
  }
  .content {
    position: absolute;
    top: 70px;
    bottom: 0;
    left: 250px;
    right: 0;
    background-color: aliceblue;
  }
}
</style>